
body{background:url("../image/风铃公主.jpg");
  background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: auto 1000px;
  
  
  }
  
  .m-padded{
      padding: 1em !important; 
  }
  
  .m-padded-mini{
      padding-top: 0.2em !important; 
  }
  
  .m-padded-tiny{
      padding-top: 0.3em !important; 
  }
  
  
  .m-padded-tb-mini{
  
  padding-top: 0.2em !important; 
  padding-bottom: 0.2em !important;
  
  }
  
  .m-padded-tb-tiny{
  
      padding-top: 0.3em !important; 
      padding-bottom: 0.3em !important;
  }
  
  .m-padded-tb-small{
  
      padding-top: 0.5em !important; 
      padding-bottom: 0.5em !important;
  }
  
  .m-padded-tb{
      padding-top: 1em !important; 
      padding-bottom: 1em !important;
  
  }
  
  .m-padded-tb-large{
  
      padding-top: 2em !important; 
      padding-bottom: 2em !important;
  }
  
  .m-padded-tb-big{
      padding-top: 3em !important; 
      padding-bottom: 3em !important;
  
  }
  
  .m-padded-tb-huge{
  
      padding-top: 4em !important; 
      padding-bottom: 4em !important;
  }
  
  .m-padded-tb-massive{
  
      padding-top: 5em !important; 
      padding-bottom: 5em !important;
  }
  
  .m-padded-lr{
  
      padding-left: 4em !important;
      padding-right: 4em !important;
  
  }
  
  
  
  
  
  /******* text  ******/
  .m-text{
      font-weight: 300 !important;
      letter-spacing: 1px !important;
      line-height: 1.8;
  
  }
  .m-text-thin{
      font-weight: 300 !important;
  }
  
  .m-text-spaces{
      letter-spacing: 1px !important;
  }
  
  .m-text-lined {
      line-height: 1.8;
  }
  
  .m-opaciyt-mini{
  opacity: 0.8 !important;
  
  }
  
  /*----------display-----------*/
  .m-inline-block{
  
  display:inline-block !important;
  
  }
  
  .m-container{
      max-width: 72em !important;
      margin: auto !important;
  }
  
  
  .m-container-small{
      max-width: 60em !important;
      margin: auto !important;
  }
  
  .m-opacity{
      opacity: 0.6!important;
  }
  
      /**  ---  margin ---     */
  
  
  
  .m-margin-tb-tiny{
  
      margin-top: 0.3em !important;
      margin-bottom: 0.3em !important;
  }
  
  .m-margin-top-small{
  
      margin-top: 0.5em !important;
     
  }
  
  
  .m-margin-top{
  
      margin-top: 1em !important;
     
  }
  
  .m-margin-top-large{
  
      margin-top: 2em !important;
     
  }
  
  .m-margin-bottom-mini{
      margin-bottom: 0.2em !important;
  
  }
  
  .m-margin-bottom-small{
      margin-bottom: 0.5em !important;
  
  }
  /* -------- ---------*/
  .m-shadow-small{
      -webkit-box-shadow:0 4px 8px rgba(0,0,0,0.2) !important;
  box-shadow:  0 4px 8px rgba(0,0,0,0.2) !important;
  
  }
  
  
  /*-------position--------*/
  
  .m-fixed {
      position: fixed !important;
      z-index: 10 !important;
  }
  
  .m-right-bottom {
    bottom: 0 !important;
    right: 0 !important;
  }
  
  
  
  
  
  /*---------------    color      ----------*/
  .m-black{
      color:#333 !important;
  }
  .m-teal{
      color:#00B5AB!important;
  }
  /*-------position--------*/
  .m-right-top{
      position :absolute;
      top:0;
      right:0;
  
  }
  
  .m-mobile-show{
  
      display: none !important;
  }
  
  
  @media screen and (max-width:768px){
  
      .m-mobile-hide{
          display: none !important;
      }
  
      .m-mobile-show{
  
          display: block !important;
      }
  
      .m-padded-lr{
          padding-right: 0 !important;
          padding-right: 0 !important;
      }
  
      .m-mobile-lr-clear{
          padding-right: 0 !important;
          padding-right: 0 !important;
  
      }
  
      .m-mobile-wide{
          width: 100% !important;
      }
  
  }